<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <meta charset="UTF-8">
  <title>授权模块 - TyFast Platform</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <!--/* 授权模块代码片段 */-->
  <th:block th:fragment="grant">
    <!-- 右侧抽屉窗口 :: 已授权角色列表 -->
    <v-navigation-drawer fixed temporary right :stateless="winFormDrawer" :width="winDrawerWidth" v-model="winDrawer">
      <v-sheet>
        <v-app-bar flat absolute dark color="indigo darken-2">
          <v-toolbar-title class="text-subtitle-1 font-weight-bold">{{$t('授权主体')}}：{{selectedItemName}}</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn icon @click="closeWinDrawer">
            <v-icon>mdi-close</v-icon>
          </v-btn>
        </v-app-bar>
        <v-card flat tile class="pb-13 pt-14">
          <v-container>
            <v-row shiro:hasPermission="/system/user/grant/save">
              <v-col>
                <v-btn depressed color="info" class="pr-5 pl-4" @click="openWinFormDrawer">
                  <v-icon small>mdi-plus</v-icon>
                  {{$t('赋权')}}
                </v-btn>
              </v-col>
            </v-row>

            <!-- 已授予的角色 -->
            <v-toolbar-title class="text-subtitle-2 font-weight-bold mt-2" v-t="'已授予的角色'"></v-toolbar-title>
            <v-data-table
                :headers="datatableRole.headers"
                :items="datatableRole.items"
                item-key="roleId"
                hide-default-footer
                disable-pagination
                fixed-header
                :loading="loading"
            >
              <template v-slot:item.operation="{item}">
                <v-btn-confirm :data="item.roleId" @confirm="doRoleDelete" shiro:hasPermission="/system/user/grant/del"></v-btn-confirm>
              </template>
            </v-data-table>
          </v-container>
        </v-card>
      </v-sheet>
      <v-footer fixed class="border-top justify-end" :color="vdark? null : 'white'">
        <v-btn depressed outlined text class="mr-4" @click="closeWinDrawer" v-t="'关闭'"></v-btn>
      </v-footer>
    </v-navigation-drawer>

    <!-- 右侧抽屉窗口 :: 可授予的角色列表 -->
    <v-navigation-drawer fixed temporary right stateless width="800" v-model="winFormDrawer" style="z-index:10" shiro:hasPermission="/system/user/grant/save">
      <v-sheet>
        <v-app-bar flat absolute dark color="indigo darken-2">
          <v-toolbar-title class="text-subtitle-1 font-weight-bold" v-t="'角色列表'"></v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn icon @click="closeWinFormDrawer">
            <v-icon>mdi-close</v-icon>
          </v-btn>
        </v-app-bar>
        <v-sheet class="py-13">
          <v-container>
            <v-text-field v-model="searchKey" append-icon="mdi-magnify" class="pt-0 pb-2 text-subtitle-2 sm-label" single-line hide-details :label="$t('请输入角色名称')"></v-text-field>
            <v-data-table
                v-model="grantFormData.selectedItems"
                :headers="datatableRoleCan.headers"
                :items="datatableRoleCan.items"
                :search="searchKey"
                item-key="roleId"
                hide-default-footer
                disable-pagination
                fixed-header
                show-select
                checkbox-color="primary"
                :loading="loading"
            />
          </v-container>
        </v-sheet>
      </v-sheet>
      <v-footer fixed class="border-top justify-end" :color="vdark? null : 'white'">
        <v-btn depressed outlined text class="mr-4" @click="closeWinFormDrawer" v-t="'关闭'"></v-btn>
        <v-btn depressed color="info" :loading="posting" :disabled="grantFormData.selectedItems.length == 0" @click="doGrantSubmit">{{$t('保存')}}</v-btn>
      </v-footer>
    </v-navigation-drawer>

    <!-- 业务js -->
    <script type="text/javascript" th:src="@{/js/system/user/user-role.js?_t=#buildtime#}"></script>
  </th:block>
</body>
</html>